



        .loading{
            position: fixed;
            z-index: 1000;
            height: 100vh;
            transition: .3s .6s;
        }
        .loading.finish{
            opacity: 0;
        }
        .loading .line{
            position: absolute;
            width: 0%;
            left: 0px;
            top: 50%;
            height: 2px;
            margin-top: -55px;
            
            background: #897053;
        }
        @keyframes loading{
            form{
                width: 0%;
            }to{
                width: 100%;
            }
        }
        .loading.active .line{
            background: #fff;
        }
        .loading .txt{
            z-index: 1;
            white-space: nowrap;
            font-size: 18px;
            line-height: 1.6;
            text-align: center;
            
        }
        .loading .txt img{
            width: 100px;
            margin: 0 auto;
            margin-bottom: 200px;
        }
        
        .loading .txt p{
            opacity: 0;
            color: #897053;
            transition-property: color,opacity;
            transition-duration: .3s,.4s;
            transition-timing-function: ease;
        }
        .loading .txt.active p{
            opacity: 1;
        }
        .loading.active .txt p{
            color: #fff;
        }
        .loading .blks{
            z-index: 3;
        }
        .loading .blks p{
            width: 100%;
            height: 0px;
            background: #897053;
            transition: .3s;
        }
        .loading.finish .blks p{
            height: 100%;
        }
        .loading .blks p:nth-child(2){
            transition-delay: .1s;
            background: #fff;
            z-index: 2;
        }
        .loading .blks p:nth-child(3){
            transition-delay: .3s;
            background: #1d1e2c;
            z-index: 3;
        }
        

        .projects.switch .contn .swiper .swiper-slide .box .pic,
        .projects.switch .contn nav .choose ul li p{
            -webkit-tap-highlight-color:transparent;
        }
        
        header .logo .txt{
            display: block;
            position: absolute;
            top: 0px;
            left: 100%;
        }

        main .cutPics{
            z-index: 1;
            overflow: hidden;
            border-width: 0px !important;
            transition: initial;
            z-index: 1;
            opacity: 1;
            transform: initial;
        }
        main .cutPics.active + .switch{
            transform: scale(.9);
        }
        main .cutPics .palace{
            position: relative;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
        main .cutPics .palace::before{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.2);
            z-index: 2;
        }
        main .cutPics .palace::after{
            content: '';
            position: absolute;
            display: block;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 55px);
            height: calc(100% - 90px);
            border: 5px solid #fff;
            z-index: 3;
        }
        main .cutPics .palace>*{
            width: 50%;
            float: left;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        main .cutPics .palace>* .box{
            width: 200%;
            position: relative;
            height: 100%;
            position: absolute;
            left: 0px;
            transition: cubic-bezier(0.25, 0.46, 0, 1) bottom 1s;
        }
        main .cutPics .palace>* .box.hidden{
            opacity: 0;
        }
        main .cutPics .palace>* .box.enter,
        main .cutPics .palace>* .box.leave{
            
        }
        main .cutPics .palace .rht .box{
            margin-left: -100%;
        }
        
        main .cutPics .palace .lft .box.enter,
        main .cutPics .palace .rht .box.enter{
            bottom: 0%;
        }
        main .cutPics .palace .lft .box.leave,
        main .cutPics .palace .rht .box{
            bottom: 100%;
        }
        main .cutPics .palace .rht .box.leave,
        main .cutPics .palace .lft .box{
            bottom: -100%;
        }
        main .cutPics .palace>* .box.noTrstn{
            transition: initial;
        }
        
        main .cutPics .ttls{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 1;
            opacity: 0;
        }
        main .cutPics .ttls .box{
            position: absolute;
            height: 195px;
            left: 350px;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
        }
        main .cutPics .ttls .box .no{
            font-size: 195px;
            font-weight: 100;
            overflow: hidden;
            position: absolute;
            animation: hideNo ease .5s 0s forwards;
            line-height: 1;
        }
        main .cutPics .ttls .box.active .no{
            animation-name: showNo;
            animation-duration: .8s;
        }
        @keyframes hideNo{
            0%{
                width:260px;
                left:0;
            }100%{
                width:0;
                left:0;
            }
        }
        @keyframes showNo{
            0%{
                width:0;
                left:260px
            }100%{
                width:260px;
                left:0;
            }
        }
        main .cutPics .ttls .box .no p{
            width: 260px;
            text-align: right;
        }
        main .cutPics .ttls .box.active .no p{
            animation: showNoP ease .8s 0s forwards;
        }
        @keyframes showNoP{
            0%{
                margin-left:-260px;
            }100%{
                margin-left:0;
            }
        }
        main .cutPics .ttls .box .desc{
            font-weight: 700;
            font-size: 70px;
            letter-spacing: 15px;
            text-transform: uppercase;
            position: absolute;
            left: 295px;
            top: 100px;
            overflow: hidden;
            animation: hideDesc .5s ease forwards;
        }
        main .cutPics .ttls .box.active .desc{
            animation: showDesc .8s ease forwards;
        }
        @keyframes hideDesc{
            0%{
                width:660px;
                margin-left:0;
            }100%{
                width:0;
                margin-left:660px;
            }
        }
        @keyframes showDesc{
            0%{
                width:0px
            }100%{
                width:660px
            }
        }
        main .cutPics .ttls .box .desc p{
            width: 660px;
            line-height: 1;
            animation: hideDescP .5s ease forwards;
        }
        main .cutPics .ttls .box.active .desc p{
            animation: none;
        }
        @keyframes hideDescP{
            0%{
                margin-left:0px
            }100%{
                margin-left:-660px
            }
        }
        main .cutPics .ttls .box::before{
            content: '';
            position: absolute;
            top: 80px;
            left: 295px;
            height: 5px;
            background: #fff;
            transition: all .3s ease;
            opacity: 0;
            width: 0;
        }
        main .cutPics .ttls .box.active::before{
            width: 75px;
            opacity: 1;
        }
        main .cutPics .ttls .box>span{
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 3px;
            opacity: 0;
            transition: all .7s ease .3s;
            position: absolute;
            left: 295px;
            bottom: -75px;
            white-space: nowrap;
            
        }
        main .cutPics .ttls .box.active>span{
            opacity: 1; 
        }

        main .cutPics .sNext{
            z-index: 2;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 1;
        }
        main .cutPics .sNext::before{
            border-color: #fff;
        } 
        main .cutPics .sNext .r{
            animation: light-hide 3s 1.5s linear infinite;
        }
        @keyframes light-hide{
            0%{opacity:1}
            10%{opacity:0}
            50%{opacity:0}
            100%{opacity:1}
        }
        main .cutPics .sNext .r span{
            background: #fff;
        }
        @keyframes light{
            0%{opacity:0.5}
            25%{opacity:1}
            50%{opacity:0.5}
            100%{opacity:0.5}
        }
        main .cutPics .sNext .arr{
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            opacity: 0;
            animation: arrFloating 3s 1.5s ease infinite;
        }
        @keyframes arrFloating{
            0%{opacity:0}
            15%{opacity:0;top:18px}
            35%{opacity:1;top:25px}
            50%{opacity:0;top:18px}
            100%{opacity:0;top:25px}
        }
        main .cutPics .sNext .t{
            color: #fff;
        }

        .switch .contn .pic .details{
            color: #acadbd;
            font-size: 14px;
            position: absolute;
            opacity: 0;
            z-index: 2;
        }
        .switch.active .contn .pic .details{
            opacity: 1;
            transition: all 0.8s 2.8s cubic-bezier(0.85, 0, 1, 1);
        }
        .switch .contn .pic .picBox img{
            animation: zoom 60s linear 0s infinite;
        }
        @keyframes zoom{
            0%{transform:scale(1)}
            50%{transform:scale(1.5)}
            100%{transform:scale(1)}
        }
        .switch .contn .num{
            font-weight: 100;
            font-size: 150px;
            line-height: 1;
            color: #1d1e2c;
            position: absolute;
            z-index: 5;
            height: 0;
            overflow: hidden;
        }
        .switch.active .contn .num{
            height: 150px;
        }
        .switch .contn .border{
            color: #897053;
            height: 315px;
            width: 760px;
            z-index: 3;
        }
        .switch .contn .border i{
            position: absolute;
            background: #897053;
            transition-duration: .3s;
        }
        .switch .contn .border .hor{
            width: 0%;
            height: 5px;
        }
        .switch .contn .border .ver{
            width: 5px;
            height: 0%;
        }
        .switch .contn .border .tp{
            top: 0px;
            left: 0px;
        }
        .switch .contn .border .rht{
            top: 0px;
            right: 0px;
        }
        .switch .contn .border .btm{
            bottom: 0px;
            right: 0px;
        }
        .switch .contn .border .lft{
            bottom: 0px;
            left: 0px;
        }
        .active.switch .contn .border .hor{
            width: 100%;
        }
        .active.switch .contn .border .ver{
            height: 100%;
        }
        .active.switch .contn .border .tp{
            transition-delay: 1s;
        }
        .active.switch .contn .border .rht{
            transition-delay: 1.3s;
        }
        .active.switch .contn .border .btm{
            transition-delay: 1.6s;
        }
        .active.switch .contn .border .lft{
            transition-delay: 1.9s;
        }
        .switch .contn .border .ttl{
            font-size: 14px;
            line-height: 18px;
            font-weight: 500;
            position: absolute;
            top: 40px;
            left: 20px;
            height: 50px;
            padding-top: 13px;
            padding-left: 10px;
            width: 0;
            overflow: hidden;
            transition: all .3s ease;
            white-space: nowrap;
        }
        .active.switch .contn .border .ttl{
            width: 130px;
            transition-delay: 2s;
        }
        .switch .contn .border .ttl::before{
            content: '';
            position: absolute;
            top: 0;
            left: -10px;
            width: 45px;
            height: 3px;
            background: #897053;
            opacity: 0;
            transition: all .3s ease;
        }
        .active.switch .contn .border .ttl::before{
            transition-delay: 2.2s;
        }
        .active.switch .contn .border .ttl::before{
            left: 10px;
            opacity: 1;
        }
        .switch .contn .border .no{
            font-size: 100px;
            position: absolute;
            bottom: 35px;
            left: 30px;
            font-weight: 500;
            width: 0;
            overflow: hidden;
            transition: all .7s ease-in;
        }
        .active.switch .contn .border .no{
            width: 220px;
            transition-delay: 2.5s;
        }


        
        .about.switch.active .contn .txt .ttl{
            max-width: 170px;
        }
        .about.switch .contn .pic{
            bottom: -60px;
            left: 50%;
        }
        .about.switch.active .contn .pic .picBox{
            height: 825px;
        }
        .about.switch .contn .pic .details{
            right: 0px;
            top: 30px;
        }
        .about.switch.active .contn .pic .details{
            top: -25px;
        }
        .about.switch .contn .num{
            bottom: 750px;
            left: 50%;
            margin-left: 450px;
        }
        .about.switch.active .contn .num{
            bottom: 600px;
            transition: all .7s 2s ease-in;
        }
        .about.switch .contn .border{
            left: 50%;
            margin-left: -225px;
            bottom: 50px;
        }
        
        .weDo.switch.active .contn .txt .ttl{
            max-width: 205px;
        }
        .weDo.switch .contn .txt .tip{
            font-size: 30px;
            line-height: 45px;
        }
        .weDo.switch .contn .txt ul{
            max-width: 0;
            overflow: hidden;
        }
        .weDo.switch.active .contn .txt ul{
            max-width: 100%;
            transition: all .5s 1.5s;
        }
        .weDo.switch .contn .txt ul li{
            font-size: 20px;
            padding-left: 60px;
            color: #6a6b7e;
            margin-bottom: 35px;
            position: relative;
            white-space: nowrap;
        }
        .weDo.switch .contn .txt ul li span{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .weDo.switch .contn .pic{
            left: 50%;
            margin-left: 225px;
            top: -25px;
        }
        .weDo.switch .contn .pic + .pic{
            top: auto;
            bottom: -60px;
            margin-left: 0;
        }
        .weDo.switch.active .contn .pic .picBox{
            height: 520px;
        }
        .weDo.switch.active .contn .pic + .pic .picBox{
            height: 600px;
        }
        .weDo.switch .contn .border{
            top: 50px;
            left: 50%;
            width: 750px;
        }
        .weDo.switch .contn .num{
            bottom: 315px;
            left: 50%;
            margin-left: 500px;
        }
        .weDo.switch.active .contn .num{
            bottom: 165px;
            transition: all .7s 1s ease-in;
        }


        .process.switch .contn .pic{
            left: 50%;
            top: 12.5%;
            z-index: 2;
        }
        .process.switch .contn .pic + .pic{
            top: auto;
            bottom: -60px;
            margin-left: -450px;
            z-index: 1;
        }
        .process.switch.active .contn .pic .picBox{
            height: 600px;
        }
        .process.switch.active .contn .pic + .pic .picBox{
            height: 375px;
        }
        .process.switch .contn .pic .details{
            transform: rotate(90deg) !important;
            top: 72px;
            right: -60px;
        }
        .process.switch.active .contn .pic .details{
            right: -100px;
        }
        .process.switch .contn .num{
            bottom: 200px;
            left: 50%;
            margin-left: 25px;
        }
        .process.switch.active .contn .num{
            bottom: 50px;
            transition: all .7s 1s ease-in;
        }


        .consult.switch .contn .pic{
            left: 50%;
            top: -25px;
            margin-left: 75px;
        }
        .consult.switch.active .contn .pic .picBox{
            height: 820px;
        }
        .consult.switch .contn .border{
            left: 50%;
            width: 220px;
            margin-left: -75px;
            bottom: 70px;
        }
        .consult.switch .contn .num{
            top: 90px;
            left: 50%;
            margin-left: 550px;
        }
        .consult.switch.active .contn .num{
            transition: all .7s 2s ease-in;
        }


        .projects.switch .contn{
            top: 50%;
            transform: translateY(-50%);
            margin-top: -60px;
            position: absolute;
            width: 100%;
            left: 0px;
            height: initial;
        }
        .projects.switch .contn .btn{
            top: calc(50% - 35px / 2 + 35px + 60px);
        }
        .projects.switch .contn .btn.prev{
            left: 125px;
        }
        .projects.switch .contn .btn.next{
            right: 125px;
        }
        .projects.switch .contn>*{
            position: initial;
        }
        .projects.switch .contn nav{
            opacity: 0;
            transform: translateY(50px);
            margin-top: 40px;
            margin-bottom: 10px;
        }
        .projects.switch.active .contn nav{
            opacity: 1;
            transform: translateY(0px);
            transition: all ease .5s .7s;
        }
        .projects.switch .contn nav .ttl{
            width: 20%;
        }
        .projects.switch .contn nav .ttl p{
            margin-left: 50px;
            font-size: 24px;
            font-weight: 700;
            color: #1d1e2c;
            margin-top: 17px;
            margin-bottom: 25px;
        }
        .projects.switch .contn nav .choose{
            width: 80%;
        }
        .projects.switch .contn nav .choose ul{
            width: 100%;
            max-width: 1200px;
        }
        .projects.switch .contn nav .choose ul li{
            width: 220px;
            display: inline-block;
            vertical-align: top;
        }
        .projects.switch .contn nav .choose ul li p{
            padding: 8px 0px;
            padding-left: 45px;
            font-size: 14px;
            line-height: 1;
            color: #8d8ea0;
            transition: all ease .3s;
            position: relative;
            cursor: pointer;
        }
        .projects.switch .contn nav .choose ul li p:hover,
        .projects.switch .contn nav .choose ul li.active p{
            color: #1d1e2c;
        }
        .projects.switch .contn nav .choose ul li.active p{
            padding-left: 72px;
        }
        .projects.switch .contn nav .choose ul li p::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all .3s ease;
            width: 25px;
            height: 2px;
            background: #8d8ea0;
        }
        .projects.switch .contn nav .choose ul li p:hover::before,
        .projects.switch .contn nav .choose ul li.active p::before{
            background: #1d1e2c;
        }
        .projects.switch .contn nav .choose ul li.active p::before{
            width: 55px;
        }
        .projects.switch .contn .swiper{
            margin: 0px -25px;
            opacity: 0;
        }
        .scale{
            position: fixed;
            z-index: 60;
            width: calc(50% - 25px);
            pointer-events: none;
            height: 450px;
            opacity: 0;
            left: 0px;
            right: 0px;
            margin: auto;
            padding: 0px 25px;
        }
        .scale.move{
            pointer-events: all;
            padding: 0px;
            opacity: 1;
            transition-property: padding,width,height,top,opacity;
            transition-duration: .7s,.7s,.7s,.7s,.3s;
            transition-delay: .3s,.3s,.3s,.3s,0s;
            transition-timing-function: ease;
            top: 0px !important;
            height: 100vh;
            width: 100%;
        }
        .scale span{
            display: block;
            position: relative;
            background: #1d1e2c;
            clip-path: polygon(3% 3%, 97% 3%,97% 97%,3% 97%);
            transition: .7s .3s clip-path;
        }
        .scale img{
            opacity: .6;
        }
        .scale.move span{
            clip-path: polygon(0% 0%, 100% 0%,100% 100%,0% 100%);
        }
        .projects.switch .contn .swiper.disappear{
            transition-delay: 0s !important;
            opacity: 0 !important;
        }
        .projects.switch.active .contn .swiper{
            opacity: 1;
            transition: all .5s .5s ease;
        }
        .projects.switch .contn .swiper .swiper-slide.hidden{
            display: none;
        }
        .projects.switch .contn .swiper .swiper-slide{
            width: calc(50% - 25px);
            padding: 0px 25px;
            height: 450px;
        }
        .projects.switch .contn .swiper .swiper-slide .box{
            position: relative;
            height: 100%;
        }
        .projects.switch .contn .swiper .swiper-slide .box .name{
            position: absolute;
            font-size: 44px;
            line-height: 54px;
            color: #fff;
            bottom: 50px;
            left: 50px;
            letter-spacing: 10px;
            font-weight: 700;
            z-index: 3;
        }
        .projects.switch .contn .swiper .swiper-slide .box .name::before{
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            width: 50px;
            height: 2px;
            background: #fff;
        }
        .projects.switch .contn .swiper .swiper-slide .box .pic,
        .projects.switch .contn .swiper .swiper-slide .box .pic img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transition: all ease .5s;
        }
        .projects.switch .contn .swiper .swiper-slide .box .pic{
            overflow: hidden;
            cursor: pointer;
            clip-path: polygon(0% 0%, 100% 0%,100% 100%,0% 100%);
        }
        .projects.switch .contn .swiper .swiper-slide .box .pic::before{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 2;
            background: #1d1e2c;
            opacity: .4;
        }
        .projects.switch .contn .swiper .swiper-slide .box:hover .pic{
            clip-path: polygon(3% 3%, 97% 3%,97% 97%,3% 97%);
        }
        
        
        .loc ul li i::before{
            background: #1d1e2c;
        }
        footer{
            transition: ease .5s all;
        }
        footer.c{
            color: #abacbc;
        }